<!-- 添加商品页面 -->
<template>
  <!-- <el-dialog class="dialog" :visible.sync="localDialogVisible" top="5%" @close="closeDialog" v-if="localDialogVisible"> -->
    <div>
      <div class="header">
        <el-tabs v-model="activeName" class="el-tabs-daohang">
          <el-tab-pane label="基本信息" name="first"></el-tab-pane>
          <el-tab-pane label="商品属性" name="second"></el-tab-pane>
          <el-tab-pane label="商品详情页" name="third"></el-tab-pane>
        </el-tabs>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel" class="cancelbutton">取消</el-button>
          <el-button @click="preview" class="previewbutton">预览</el-button>
          <el-button @click="confirm" class="confirmbutton">确定</el-button>
        </span>
      </div>
      <div class="main-content">
        <keep-alive>
          <component :is="currentTabComponent"></component>
        </keep-alive>
      </div>
      <!-- <div class="footer">
        <el-button @click="cancel" class="cancelbutton">取消</el-button>
        <el-button @click="confirm" class="confirmbutton">确定</el-button>
      </div> -->
    </div>

  <!-- </el-dialog> -->
</template>

<script>
import BasicInformation from './BasicInformation.vue';
import CommodityAttributes from './CommodityAttributes.vue';
import Editor from '@/views/editor/editProduceIntroduction.vue';
import { addProduct } from '@/api/api.js'
export default {
  components: {
    BasicInformation,
    CommodityAttributes,
    Editor//测试用的编辑器
  },
  props: {
      dialogVisible: {
          type: Boolean,
          default: false
      },
  },
  data() {
    return {
      localDialogVisible: this.dialogVisible,
      activeName: 'first',
      addProduct:{
        "brandId": "12",
        "brandName": "京东东",
        "categoryAttributeEditDTOS": [
          {
            "delFlag": 0,
            "editDetailDTOS": [
              {
                "delFlag": 0,
                "handAddStatus": 0,
                "id": "1234567890",
                "inputList": "红色,黑色",
                "inputType": 0,
                "name": "颜色1",
                "selectType": 0,
                "sort": 0
              }
            ],
            "id": "",
            "name": ""
          }
        ],
        "firstAttributeSaveDTOS": [],
        "commodityIntro": "好吃你就多吃点",
        "commodityName": "好吃点",
        "commodityType": 0,
        "commodityUnit": "袋",
        "detailHtml": "",
        "detailMobileHtml": "",
        "imageInfos": [
          {
            "businessId": "",
            "delFlag": 0,
            "fileId": "",
            "id": "",
            "imageName": "",
            "imageUrl": "",
            "isDefault": true,
            "sortNo": 0
          }
        ],
        "pic": "",
        "productCategoryId": "654321",
        "productSn": "",
        "shopId": sessionStorage.getItem("shopid"),
        "skuStockList": [
            {
                "pic": "",
                "skuCode": "2",
                "spDatas": [
                    {
                        "key": "",
                        "value": ""
                    }
                ]
            }
        ]
      },
      // //BasicInformation.vue
      // ruleForm: {
      //   commodityName: '',
      //   commodityType: '',
      //   brand: '',
      //   productSn: '',
      //   commodityUnit: '',
      //   commodityIntro: '',
      // },

      // //CommodityAttributes.vue
      // specForm: {
      //   bodyColors: [],
      //   storageCapacities: [],
      //   networkTypes: [],
      //   screenSizes: '',
      //   systems: '',
      //   batteryCapacities: '',
      //   sku: '',
      // },
      originalAddCommodity : {},
    }
  },
  computed: {
    // 计算属性，根据当前激活的标签页返回对应的组件名称
    currentTabComponent() {
      switch (this.activeName) {
        case 'first':
          return 'BasicInformation';
        case 'second':
          return 'CommodityAttributes';
        case 'third':
          return 'Editor';
        default:
          return 'BasicInformation'; // 或者一个默认组件
      }
    },
  },
  watch: {
      dialogVisible(newVal) {
          this.localDialogVisible = newVal;
          // console.log(newVal);
      }
  },
  created() {
    this.originalAddCommodity = JSON.parse(JSON.stringify(this.$store.state.addCommodity));
  },
  methods:{
    refreshAddCommodity() {
      this.$store.state.addCommodity = JSON.parse(JSON.stringify(this.originalAddCommodity));;
    },
    async submit() {
      const ruleForm = this.$store.state.addCommodity.ruleForm;
      const specForm = this.$store.state.addCommodity.specForm;
      console.log("ruleForm",ruleForm);
      console.log("specForm",specForm);
      this.addProduct.commodityName = ruleForm.commodityName;
      this.addProduct.commodityIntro = ruleForm.commodityIntro;
      this.addProduct.productSn = ruleForm.productSn;
      this.addProduct.commodityUnit = ruleForm.commodityUnit;
      // this.addProduct.productCategoryId = ruleForm.commodityType;
      this.addProduct.productCategoryId = ruleForm.commodityType[ruleForm.commodityType.length - 1];
      this.addProduct.brandName = ruleForm.brand;
      this.addProduct.skuStockList = specForm.skuStockList;
      let labels = specForm.bodyColors.map(item => item.label);//颜色
      let values = {
        
      }
      this.addProduct.firstAttributeSaveDTOS = specForm.firstAttributeSaveDTOS;
      this.addProduct.imageInfos = ruleForm.imageInfos
      this.addProduct.pic = ruleForm.pic;
      this.addProduct.brandName = ruleForm.brand;

      console.log("this.addProduct",this.addProduct);
      try {
          const response = await addProduct(this.addProduct);
          console.log("提交新商品数据",response.data);
          return response.data;
        } catch (error) {
          console.error('提交新商品数据时出错：', error);
        }
    },
    checkFormFields() {
      const { commodityName, commodityType, commodityIntro } = this.$store.state.addCommodity.ruleForm;
      const { skuStockList } = this.$store.state.addCommodity.specForm;
      if (!commodityName || !commodityType || !commodityIntro || !skuStockList) {
        return false; // 返回 false 表示表单不完整
      }
      return true; // 返回 true 表示表单完整
    },
    cancel() {
      this.$router.push('/Main/CommodityList')
    },
    preview(){
      this.$message({
          message: '预览页面',
          type: 'success'
        });
    },
    async confirm() {
      if (this.checkFormFields()) {
        const response = await this.submit()
        if(response.code==200){
          // this.localDialogVisible = false;
          this.closeDialog();
          this.$message({
            message: '添加成功',
            type: 'success'
          });
          this.$router.push('/Main/CommodityList');
          this.$emit('submit-form');
        }else{
          console.log(response.message);
          this.$message.error(response.message);
        }
      } else {
        this.$message.error('商品名称 类型 简介 sku 有填写不完整');
      }
      
    },
    closeDialog() {
        this.refreshAddCommodity();
        this.activeName = 'first';
        // 当点击关闭按钮时，更新本地数据并发出事件通知父组件
        this.localDialogVisible = false;
        this.$emit('update:dialogVisible', false);
    }
  }
}
</script>

<style scoped>

.el-tabs-daohang /deep/.el-tabs__item{
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0px;
  line-height: 25.2px;
  text-align: left;
  vertical-align: top;
}
.dialog {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y:hidden
}
.main-content {
  height: 100%;
  flex:1;/*使内容区域填充剩余空间 */
  overflow-y:auto;/*当内容超出时显示滚动条*/
  scrollbar-width:thin;
  /* &::-webkit-scrollbar{width:8px;}
  &::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,1);border-radius:4px;}
  &::-webkit-scrollbar-track{background:transparent;} */
  /* scrollbar-color:rgba(0,0,0,1)transparent; */
}

/* .footer {
  height: 70px;
  opacity: 1;
  border-radius: 0 0 10px 10px;
  background: rgba(245, 247, 250, 1);
} */

.dialog-footer{
  float: right;
  position: relative;
  top: -60px;
}

.cancelbutton{
  /* position: relative;
  left: 778px;
  top: 10px; */
  width: 75px;
  height: 40px;
  opacity: 1;
  border-radius: 5px;
  background: rgba(171, 180, 196, 1);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
}

.previewbutton{
  width: 75px;
  height: 40px;
  opacity: 1;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 500;
}

.confirmbutton{
  /* position: relative;
  left: 798px;
  top: 10px; */
  width: 112px;
  height: 40px;
  opacity: 1;
  border-radius: 5px;
  background: rgba(90, 52, 179, 1);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
}
</style>